<template>
  <div class="box">
    {{ 1 + 1 }}
  </div>
  <table>
    <tbody>
      <tr v-for="(item, index) in pj.list" :key="index">
        <td>{{ index }}</td>
        <td>{{ item.init }}</td>
        <td>{{ item.total }}</td>
        <td>{{ item.rate }}</td>
        <td>{{ item.rate1 }}</td>
        <td>{{ item.rate2 }}</td>
      </tr>
    </tbody>
  </table>
  <table>
    <tbody>
      <tr v-for="(item, index) in list" :key="index">
        <td>{{ item.energy }}</td>
        <td>{{ item.time }}</td>
        <td>{{ item.energy_per_time }}</td>
      </tr>
    </tbody>
  </table>
  <div></div>
  <el-checkbox v-model="add45">45%</el-checkbox>
  <el-checkbox v-model="addEnergyBack">返回</el-checkbox>
  <el-checkbox v-model="addBackDot">返X</el-checkbox>
  <div>
    <button @click="add">计算</button>
  </div>
</template>
<script>
import html2json from '../../libs/html2json.esm.js'
export default {
  data() {
    return {
      times: [9, 12, 15, 18, 21],
      list: [],
      add45: false,
      addEnergyBack: false,
      addBackDot: false,
      pj: {
        init: 5000,
        total: 10755,
        list: []
      }
    }
  },
  methods: {
    add() {
      console.log(`helloworld`)
      let times = this.times
      let list = times.map((time, index) => {
        let energy = 35 * index + 25
        let back_energy = 0
        if (this.addEnergyBack) back_energy = index * 25 * 0.2
        if (this.add45) time = time * 1.45
        if (this.addBackDot) energy = energy - 35 * 0.6
        let energy_per_time = (energy - back_energy) / time
        return {
          energy,
          time: time.toFixed(2),
          energy_per_time: energy_per_time.toFixed(2),
          back_energy
        }
      })

      //13 * 10 = 130
      //0.06 * 0.25 =  1.5%

      this.list = list
      let pj = this.pj
      pj.list = []

      for (var i = 0; i <= 5; i++) {
        let num = 340 * i
        let rate = pj.init / pj.total
        let rate1 = (pj.init - num) / (pj.total - num)
        let rate2 = (pj.init - num * 1.2) / (pj.total - num * 1.2)
        let data = {
          index: i,
          init: pj.init,
          total: pj.total,
          rate: rate.toFixed(2),
          rate1: rate1.toFixed(2),
          rate2: rate2.toFixed(2)
        }
        pj.list.push(data)
      }

      //30 2 = 15 * 20 = 300
      //30 * 5 + 25 =
      //30 * 5 + 25 =
      //60%
    }
  },
  mounted() {
    this.add()
  }
}
</script>
<style type="text/css">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
</style>
